<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8">
    <title>用户管理界面</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" href="${pageContext.servletContext.contextPath}/static/assets/img/icon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/static/layui/css/layui.css">
    <%--    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/static/layui/dropMenu/dropMenu.css">--%>
    <script src="${pageContext.servletContext.contextPath}/static/layui/layui.js"></script>
</head>
<body data-background-color="bg3">

<table class="layui-table" lay-filter="test" id="reserve" lay-data="{id:'id'}"></table>

<script src="${pageContext.servletContext.contextPath}/webjars/jquery/3.1.1/jquery.min.js"></script>

<%--行工具--%>
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-xs" lay-event="role" style="color: #fff">修改角色</a>
    <a class="layui-btn layui-btn-xs" lay-event="delete" style="color: #fff">删除</a>

</script>

<%--头工具--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>
<script>
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };

        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }

        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(
                    RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }

        return fmt;
    }

    var tableLns;
    $(() => {
        layui.use('table', function () {
            let table = layui.table;

            tableLns = table.render({
                id: "reserve",
                elem: '#reserve'
                , url: '${pageContext.servletContext.contextPath}/userInfo/getUserRole'
                , toolbar: "#toolbarDemo"
                , cols: [[{type: "checkbox"}
                    , {field: 'NICKNAME', minWidth: 188, title: '用户昵称', sort: true, edit: "text"}
                    , {field: "USERNAME", minWidth: 106, title: "用户名", sort: true, edit: "text"}
                    , {
                        field: "PASSWORD", minWidth: 106, title: "密码", sort: true, edit: "text",
                        templet: function (obj) {

                            return "隐藏";
                        }
                    }
                    , {field: "ROLE_NAME", minWidth: 106, title: "角色名", sort: true}
                    , {field: "ROLE_DESC", minWidth: 106, title: "角色描述", sort: true}
                    , {fixed: 'right', align: 'center', toolbar: '#barDemo', minWidth: 150}
                ]]
                , page: true
            });
            table.on('toolbar(test)', function (obj) {
                console.log(obj);
                let checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
                switch (obj.event) {
                    //预约用户信息
                    case 'add':
                        $.ajax({
                            url: "${pageContext.servletContext.contextPath}/roleInfo/getRoleInfo",
                            type: "POST",
                            dataType: "html",
                            async: true,//默认 异步
                            success: function (data) {
                                console.log(data);
                                layer.open({
                                    btn: ['新增', '取消'],
                                    type: 1,
                                    skin: 'layui-layer-demo', //样式类名
                                    closeBtn: 1, //不显示关闭按钮
                                    anim: 2,
                                    title: "创建用户",
                                    shadeClose: true, //开启遮罩关闭
                                    content: data,
                                    yes: function (index, layero) {
                                        //按钮【按钮一】的回调
                                        let val = layui.form.val("createUserinfo");
                                        console.log(val);
                                        if (val == undefined || val == null) {
                                            layer.msg("创建失败")
                                            layer.closeAll();
                                            return;
                                        }
                                        if (val.roleInfoId == -1) {
                                            layer.msg("请选择角色");
                                            return;
                                        }
                                        if (val.passWord == "") {
                                            layer.msg("请输入密码");
                                            return;
                                        }
                                        if (val.userName == "") {
                                            layer.msg("请输入用户名")
                                            return;
                                        }
                                        if (val.nickName == "") {
                                            layer.msg("请输入昵称");
                                            return;
                                        }
                                        let retData;
                                        $.ajax({
                                            url: "${pageContext.servletContext.contextPath}/userInfo/insertUserInfo",
                                            data: val,
                                            type: "POST",
                                            dataType: "json",
                                            async: false,//默认 异步
                                            success: function (data) {
                                                console.log(data);
                                                retData = data;
                                            },
                                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                                // 通常 textStatus 和 errorThrown 之中
                                                // 只有一个会包含信息
                                                //this; // 调用本次AJAX请求时传递的options参数
                                            }
                                        });
                                        if (retData.msg == null) {
                                            layer.msg("异常");
                                        } else
                                            layer.msg(retData.msg);
                                        layer.closeAll();
                                        //刷新表格
                                        tableLns.reload();
                                    },
                                    btn2: function (index, layero) {

                                        layer.closeAll();
                                    }
                                });
                                layui.use('form', function () {
                                    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                                    form.render();
                                });
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                // 通常 textStatus 和 errorThrown 之中
                                // 只有一个会包含信息
                                //this; // 调用本次AJAX请求时传递的options参数
                            }
                        });

                        break;
                    case 'delete':
                        let postData = [];
                        let data = checkStatus.data;
                        for (let temp in data) {
                            postData.push(data[temp]["USERINFOID"]);
                        }
                        // layer.msg('删除');
                        $.ajax({
                            url: "${pageContext.servletContext.contextPath}/userInfo/deleteUserinfo",
                            data: {
                                userId: postData
                            },
                            type: "POST",
                            dataType: "json",
                            success: function (data) {
                                console.log(data);
                                if (data.code != 0) {
                                    //错误提示
                                    layer.msg(data.msg);
                                    return;
                                }
                                //刷新表
                                tableLns.reload();
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                // 通常 textStatus 和 errorThrown 之中
                                // 只有一个会包含信息
                                //this; // 调用本次AJAX请求时传递的options参数
                            }
                        });
                        break;
                    case 'update':
                        layer.msg('编辑');
                        break;
                }
            });

            //工具条事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                let data = obj.data; //获得当前行数据
                let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                let ajaxData = "";
                if (layEvent == "role") {//修改角色
                    //自定页
                    $.ajax({
                        url: "${pageContext.servletContext.contextPath}/roleInfo/getRoleInfoParent",
                        type: "POST",
                        dataType: "html",
                        async: false,//默认 异步
                        success: function (data) {
                            ajaxData = data;
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            // 通常 textStatus 和 errorThrown 之中
                            // 只有一个会包含信息
                            //this; // 调用本次AJAX请求时传递的options参数
                        }
                    });
                    layer.open({
                        btn: ['修改', '取消'],
                        type: 1,
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 1, //不显示关闭按钮
                        anim: 2,
                        title: "请选择角色",
                        shadeClose: true, //开启遮罩关闭
                        offset: "0px",
                        content: ajaxData,
                        yes: function (index, layero) {
                            let val = layui.form.val("roleInfoId");
                            let roleInfoId = val.roleInfoId;
                            if (roleInfoId == -1) {
                                layer.msg("请选择角色");
                                return;
                            }
                            $.ajax({
                                url: "${pageContext.servletContext.contextPath}/userInfo/updateUserRole",
                                data: {
                                    userinfoId: data.USERINFOID,
                                    roleId: roleInfoId
                                },
                                type: "POST",
                                dataType: "json",
                                async: false,//默认 异步
                                success: function (data) {
                                    layer.msg(data.msg);
                                    tableLns.reload();
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    // 通常 textStatus 和 errorThrown 之中
                                    // 只有一个会包含信息
                                    //this; // 调用本次AJAX请求时传递的options参数
                                }
                            });
                            layer.closeAll();
                        },
                        btn2: function (index, layero) {
                            layer.closeAll();
                        }
                    });
                    layui.use('form', function () {
                        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                        form.render();
                    });

                }
                if (layEvent === 'delete') { //删除
                    layer.confirm('确定要删除吗？', function (index) {
                        console.log(data);
                        // console.log(index);
                        // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        // layer.close(index);
                        //向服务端发送删除指令
                        let id = [];
                        id.push(data.USERINFOID);
                        $.ajax({
                            url: "${pageContext.servletContext.contextPath}/userInfo/deleteUserinfo",
                            data: {
                                userId: id
                            },
                            type: "POST",
                            dataType: "json",
                            success: function (data) {
                                console.log(data);
                                if (data.code != 0) {
                                    //提示错误
                                    layer.msg(data.msg);
                                    return;
                                }
                                //刷新列表
                                tableLns.reload();
                                layer.msg(data.msg);
                                return;
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                // 通常 textStatus 和 errorThrown 之中
                                // 只有一个会包含信息
                                //this; // 调用本次AJAX请求时传递的options参数
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            table.on('edit(test)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
                console.log(obj);
                console.log(obj.value); //得到修改后的值
                console.log(obj.field); //当前编辑的字段名
                console.log(obj.data); //所在行的所有相关数据
                let data = obj.data;
                console.log(data)
                let sendData = {
                    id: data.USERINFOID,
                    userNum: data.USER_NUM,
                    nickname: data.NICKNAME,
                    username: data.USERNAME,
                    password: data.PASSWORD
                }
                updateUserInfo(sendData);
                //end
            });


            //$() end
        });
        <%--layui.config({--%>
        <%--    base: '/js/', //拓展模块的根目录--%>
        <%--}).extend({--%>
        <%--    dropMenu: '${pageContext.servletContext.contextPath}/static/layui/dropMenu'--%>
        <%--});--%>

        $(window).resize(function () {
            let ret = false;
            setTimeout(function () {
                ret = true;
            }, 500);
            setInterval(function () {
                if (ret == true) {
                    return;
                }
                console.log("更新了");
                tableLns.resize();
            }, 100);
        });

    });

    function updateUserInfo(sendData) {
        let retData;
        $.ajax({
            url: "${pageContext.servletContext.contextPath}/userInfo/updateUserInfo",
            data: sendData,
            type: "POST",
            dataType: "json",
            async: false,//默认 异步
            success: function (data) {
                layer.msg(data.msg);
                retData = data;

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // 通常 textStatus 和 errorThrown 之中
                // 只有一个会包含信息
                //this; // 调用本次AJAX请求时传递的options参数
            }
        });
        if (retData.code != 0)
            tableLns.reload();
    }

</script>
</body>
</html>